<script setup>
import { ref, onMounted,computed } from 'vue'
import { queryJobCountApi,querySexCountApi } from '@/api/report';

//明确组件命名（解决ReferenceError）
defineOptions({ name: 'EmpReportView' })

const data=ref([]);
const genderData=ref([]);

const searchGender= async ()=>{
  const result=await querySexCountApi();
  if(result.code){
    genderData.value=result.data;
  }
};

onMounted( async ()=>{
  const result=await queryJobCountApi();
  if(result.code){
    let joblist=result.data.jobList;
    let jobcount=result.data.dataList;
    data.value=[];
    for(let i=0;i<joblist.length;i++){
      data.value.push({
        value:jobcount[i],
        name:joblist[i]
      })
    }
  }
  searchGender();
});

const option=computed(()=>({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '员工职位',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: data.value
    }
  ]
}));


const option2=computed(()=>({
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '员工性别分布表',
      type: 'pie',
      radius: '50%',
      data: genderData.value,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}));

</script>

<template>
  <h1>员工信息统计</h1>
  <div class="container">
    <h3>员工职位分布表</h3>
    <v-chart :option="option" class="chart"/>
  </div>
  <div class="container">
    <h3>员工性别分布表</h3>
    <v-chart :option="option2" class="chart"/>
  </div>
</template>

<style scoped>
.chart{
  height: 400px;
}
.container{
  margin-top: 40px;
}
h3{
  text-align: center;
  margin-bottom: 0px;
}
</style>